﻿@model AddressModel
@{ 
    var prefix = ViewData.TemplateInfo.HtmlFieldPrefix;
}
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
<script asp-location="Footer">
        function @Html.IdFor(model => model.CountryId)_select_element(e) {
            var selectedItem = e.value;
            var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
            axios({
                method: 'get',
                url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                params: { "countryId": selectedItem, "addSelectStateItem": "true" },
            }).then(function (response) {
                ddlStates.innerHTML = '';
                response.data.forEach(function (id, option) {
                    elChild = document.createElement('option');
                    elChild.setAttribute('value', id.id);
                    elChild.innerHTML = id.name;
                    ddlStates.appendChild(elChild);
                });
            }).then(function () {
                if (ddlStates.length > 1) {
                    ddlStates.classList.remove('is-valid');
                    ddlStates.classList.add('is-invalid');
                } else {
                    ddlStates.classList.remove('is-invalid');
                    ddlStates.classList.add('is-valid');
                }
            }).catch(function (error) {
                alert(error);
            });
        }
    function @Html.IdFor(model => model.StateProvinceId)_select_element(e) {
        var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
        if (e.selectedIndex > 0) {
            ddlStates.classList.remove('is-invalid');
            ddlStates.classList.add('is-valid');
        } else {
            ddlStates.classList.remove('is-valid');
            ddlStates.classList.add('is-invalid');
        }
    }
</script>
}
<input asp-for="Id" type="hidden" />
<div class="edit-address row">
    <div class="form-group col-sm-12 col-md-6">
        <label asp-for="FirstName" class="col-form-label">@T("Address.Fields.FirstName"):</label>
        <span class="required">*</span>
        <input asp-for="FirstName" class="form-control" v-validate="'required'" />
        <span class="field-validation-error">{{veeErrors.first('@(prefix).FirstName')}}</span>
        <span asp-validation-for="FirstName"></span>
    </div>
    <div class="form-group col-sm-12 col-md-6">
        <label asp-for="LastName" class="col-form-label">@T("Address.Fields.LastName"):</label>
        <span class="required">*</span>
        <input asp-for="LastName" class="form-control" v-validate="'required'" />
        <span class="field-validation-error">{{veeErrors.first('@(prefix).LastName')}}</span>
        <span asp-validation-for="LastName"></span>
    </div>
    <div class="form-group col-sm-12">
        <label asp-for="Email" class="col-form-label">@T("Address.Fields.Email"):</label>
        <span class="required">*</span>
        <input asp-for="Email" class="form-control" v-validate="'required|email'" />
        <span class="field-validation-error">{{veeErrors.first('@(prefix).Email')}}</span>
        <span asp-validation-for="Email"></span>
    </div>
    @if (Model.CompanyEnabled)
    {
        <div class="form-group col-sm-12">
            <label asp-for="Company" class="col-form-label">@T("Address.Fields.Company"):</label>
            @if (Model.CompanyRequired)
            {
                <span class="required">*</span>
                <input asp-for="Company" class="form-control" v-validate="'required'"  />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).Company')}}</span>
            } else
            {
                <input asp-for="Company" class="form-control" />
            }
            <span asp-validation-for="Company"></span>
        </div>
    }
    @if (Model.VatNumberEnabled)
    {
        <div class="form-group col-sm-12">
            <label asp-for="VatNumber" class="col-form-label">@T("Address.Fields.VatNumber"):</label>
            @if (Model.VatNumberRequired)
            {
                <span class="required">*</span>
                <input asp-for="VatNumber" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).VatNumber')}}</span>
            } else
            {
                <input asp-for="VatNumber" class="form-control" />
            }
            <span asp-validation-for="VatNumber"></span>
        </div>
    }
    @if (Model.CountryEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="CountryId" class="col-form-label">@T("Address.Fields.Country"):</label>
            <span class="required">*</span>
            <select asp-for="CountryId" asp-items="Model.AvailableCountries" 
                    onchange="@Html.IdFor(model => model.CountryId)_select_element(this)" class="custom-select form-control" v-validate="'required'"></select>
            <span class="field-validation-error">{{veeErrors.first('@(prefix).CountryId')}}</span>
            <span asp-validation-for="CountryId"></span>
        </div>
    }

    @if (Model.CountryEnabled && Model.StateProvinceEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="StateProvinceId" class="col-form-label">@T("Address.Fields.StateProvince"):</label>
            <select asp-for="StateProvinceId" class="custom-select form-control" onchange="@Html.IdFor(model => model.StateProvinceId)_select_element(this)" asp-items="Model.AvailableStates"></select>
            <span class="field-validation-error">{{veeErrors.first('@(prefix).StateProvinceId')}}</span>
            <span asp-validation-for="StateProvinceId"></span>
        </div>
    }
    @if (Model.CityEnabled)
    {
        <div class="form-group col-sm-12">
            <label asp-for="City" class="col-form-label">@T("Address.Fields.City"):</label>
            @if (Model.CityRequired)
            {
                <span class="required">*</span>
                <input asp-for="City" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).City')}}</span>
            } else
            {
                <input asp-for="City" class="form-control" />
            }
            <span asp-validation-for="City"></span>
        </div>
    }
    @if (Model.StreetAddressEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="Address1" class="col-form-label">@T("Address.Fields.Address1"):</label>
            @if (Model.StreetAddressRequired)
            {
                <span class="required">*</span>
                <input asp-for="Address1" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).Address1')}}</span>
            }
            else
            {
                <input asp-for="Address1" class="form-control" />
            }
            <span asp-validation-for="Address1"></span>
        </div>
    }
    @if (Model.StreetAddress2Enabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="Address2" class="col-form-label">@T("Address.Fields.Address2"):</label>
            @if (Model.StreetAddress2Required)
            {
                <span class="required">*</span>
                <input asp-for="Address2" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).Address2')}}</span>
            } else
            {
                <input asp-for="Address2" class="form-control" />
            }
            <span asp-validation-for="Address2"></span>
        </div>
    }
    @if (Model.ZipPostalCodeEnabled)
    {
        <div class="form-group col-sm-12">
            <label asp-for="ZipPostalCode" class="col-form-label">@T("Address.Fields.ZipPostalCode"):</label>
            @if (Model.ZipPostalCodeRequired)
            {
                <span class="required">*</span>
                <input asp-for="ZipPostalCode" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).ZipPostalCode')}}</span>
            } else
            {
                <input asp-for="ZipPostalCode" class="form-control" />
            }
            <span asp-validation-for="ZipPostalCode"></span>
        </div>
    }
    @if (Model.PhoneEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="PhoneNumber" class="col-form-label">@T("Address.Fields.PhoneNumber"):</label>
            @if (Model.PhoneRequired)
            {
                <span class="required">*</span>
                <input asp-for="PhoneNumber" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).PhoneNumber')}}</span>
            } else
            {
                <input asp-for="PhoneNumber" class="form-control" />
            }
            <span asp-validation-for="PhoneNumber"></span>
        </div>
    }
    @if (Model.FaxEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="FaxNumber" class="col-form-label">@T("Address.Fields.FaxNumber"):</label>
            @if (Model.FaxRequired)
            {
                <span class="required">*</span>
                <input asp-for="FaxNumber" class="form-control" v-validate="'required'" />
                <span class="field-validation-error">{{veeErrors.first('@(prefix).FaxNumber')}}</span>
            } else
            {
                <input asp-for="FaxNumber" class="form-control" />
            }
            <span asp-validation-for="FaxNumber"></span>
        </div>
    }
    @if (Model.CustomAddressAttributes.Any())
    {
        <partial name="_AddressAttributes" model="Model.CustomAddressAttributes" />
    }
    <div id="errors-address"></div>
</div>